/* ====================================
   基础样式模块 (base.css)
   包含：字体定义、CSS变量、重置样式
   ==================================== */

/* Web字体定义和加载优化 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* 字体显示优化 */
@font-face {
    font-family: 'OptimizedMono';
    src: local('JetBrains Mono'), 
         local('Fira Code'), 
         local('Source Code Pro'),
         local('SF Mono'),
         local('Consolas');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

/* CSS变量定义 */
:root {
    /* 主要字体族 */
    --font-family-mono: 
        'OptimizedMono',
        'JetBrains Mono', 
        'Fira Code', 
        'Source Code Pro',
        'SF Mono',
        'Monaco',
        'Inconsolata',
        'Roboto Mono',
        'Ubuntu Mono',
        'Consolas',
        'Courier New', 
        monospace;
    
    /* 中英文混合字体 */
    --font-family-mixed: 
        'PingFang SC', 
        'Microsoft YaHei', 
        'Source Han Sans SC',
        var(--font-family-mono);
    
    /* 字体大小 */
    --font-size-formula: clamp(13px, 2.5vw, 15px);
    --font-size-formula-mobile: 13px;
    
    /* 行高 */
    --line-height-formula: 1.8;
    --line-height-formula-mobile: 1.7;
    
    /* 字符间距 */
    --letter-spacing-formula: 0.02em;
    --word-spacing-formula: 0.05em;
    
    /* 颜色变量 */
    --color-primary: #409eff;
    --color-success: #67c23a;
    --color-warning: #e6a23c;
    --color-danger: #f56c6c;
    --color-info: #909399;
    
    --color-text-primary: #303133;
    --color-text-regular: #606266;
    --color-text-secondary: #909399;
    --color-text-placeholder: #c0c4cc;
    
    --color-border: #dcdfe6;
    --color-border-light: #e4e7ed;
    --color-border-lighter: #ebeef5;
    --color-border-extra-light: #f2f6fc;
    
    --color-background: #ffffff;
    --color-background-light: #f5f7fa;
    --color-background-lighter: #fafbfc;
    
    /* 文本颜色 */
    --color-formula-text: #1a202c;
    --color-formula-text-dark: #e2e8f0;
    
    /* 文本阴影 */
    --text-shadow-light: 
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.1);
    --text-shadow-dark: 
        0 1px 0 rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.3);
    --text-shadow-retina: 
        0 0.5px 0 rgba(255, 255, 255, 0.9),
        0 0.5px 1px rgba(0, 0, 0, 0.08);
    
    /* 间距变量 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    
    /* 圆角变量 */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    
    /* 阴影变量 */
    --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 全局重置样式 */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

/* 基础元素样式 */
body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    background-color: var(--color-background-light);
    color: var(--color-text-primary);
    line-height: 1.6;
    font-size: 14px;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 链接样式 */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #66b1ff;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-background-lighter);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* 选择文本样式 */
::selection {
    background: rgba(64, 158, 255, 0.2);
    color: var(--color-text-primary);
}

/* 辅助类 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 动画过渡 */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}